<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>tinyheart</title>
		<style type="text/css">
			body{
				padding-top: 10px;
			}
			.all_bg{
				width: 800px;
				height:600px;
				margin:0px auto;
			}
			#allcanvas{
				position: relative;
				width: 800px;
				height: 600px;
				margin: 0px;
			}
			#canvas1{
				position:absolute;
				bottom: 0;
				left: 0;
				z-index: 1;
			}
			#canvas2{
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 0;
			}
				.musicBtn
				{
					position: absolute;
					left: 120px;
					top: 50px;
					animation: myrotate 1s infinite linear;
	            }
		</style>
	</head>
	<body>
		<div class="all_bg">
			<div id="allcanvas">
				<canvas id="canvas1" width="800" height="600"></canvas>
				<canvas id="canvas2" width="800" height="600"></canvas>
			</div>
		</div>
		<script type="text/javascript" src="js/main.js"></script>
		<script type="text/javascript" src="js/commonFunctions.js"></script>
		<script type="text/javascript" src="js/background.js"></script>
		<script type="text/javascript" src="js/ane.js"></script>
		<script type="text/javascript" src="js/fruit.js"></script>
		<script type="text/javascript" src="js/mom.js"></script>
		<script type="text/javascript" src="js/collision.js" ></script>
		<script type="text/javascript" src="js/baby.js" ></script>
		<img src="img/musicBtn.png"  class="musicBtn" onclick="playOrPause(this)"/>
		<audio id="playMusic" src="img/ween - Loop de Loop.mp3" autoplay="autoplay"></audio>
	</body>
</html>
